<template>
    <div class="message-form" :style="position" ref="formContainer" @mousedown="startDrag">
        <div class="collapse-header">
            <h3 class="title">请您留言</h3>
            <div class="collapse-btn" @click="toggleCollapse">
                <i :class="!isCollapsed ? 'el-icon-minus' : 'el-icon-full-screen'"></i>
            </div>
        </div>

        <div class="form-content" v-show="!isCollapsed">
            <div class="description">感谢您的关注，当前客服人员不在线，请填写一下您的信息，我们会尽快和您联系。</div>

            <el-form :model="form" :rules="rules" ref="formRef" @submit.native.prevent>
                <el-form-item prop="message">
                    <el-input
                        type="textarea"
                        v-model="form.message"
                        :rows="3"
                        placeholder="请在此输入留言内容，我们会尽快与您联系。（必填）"
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-input v-model="form.name" placeholder="姓名" prefix-icon="el-icon-user"></el-input>
                </el-form-item>

                <el-form-item prop="phone">
                    <el-input v-model="form.phone" placeholder="电话（必填）" prefix-icon="el-icon-phone"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-input v-model="form.email" placeholder="邮箱" prefix-icon="el-icon-message"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-input v-model="form.address" placeholder="地址" prefix-icon="el-icon-location"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm(formRef)" class="submit-btn">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue'
import { Message } from 'element-ui'
// import request from '../utils/request'
const formContainer = ref(null)
const formRef = ref(null)
const isCollapsed = ref(false)
const position = ref({
    right: '20px',
    bottom: '50px',
})
const isDragging = ref(false)
const dragOffset = ref({ x: 0, y: 0 })
const form = ref({
    message: '',
    name: '',
    phone: '',
    email: '',
    address: '',
})
const rules = {
    message: [{ required: true, message: '请输入留言内容', trigger: ['blur', 'chnage'] }],
    phone: [{ required: true, message: '请输入联系电话', trigger: ['blur', 'chnage'] }],
}

const toggleCollapse = () => {
    isCollapsed.value = !isCollapsed.value
}
const startDrag = (event) => {
    if (event.target.tagName.toLowerCase() === 'input' || event.target.tagName.toLowerCase() === 'textarea') {
        return
    }
    isDragging.value = true
    const rect = formContainer.value.getBoundingClientRect()
    dragOffset.value = {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top,
    }
    document.addEventListener('mousemove', onDrag)
    document.addEventListener('mouseup', stopDrag)
}

const onDrag = (event) => {
    if (!isDragging.value) return
    const x = event.clientX - dragOffset.value.x
    const y = event.clientY - dragOffset.value.y

    const maxX = window.innerWidth - formContainer.value.offsetWidth
    const maxY = window.innerHeight - formContainer.value.offsetHeight

    position.value = {
        left: `${Math.min(Math.max(0, x), maxX)}px`,
        top: `${Math.min(Math.max(0, y), maxY)}px`,
    }
}

const stopDrag = () => {
    isDragging.value = false
    document.removeEventListener('mousemove', onDrag)
    document.removeEventListener('mouseup', stopDrag)
}

const submitForm = (formEl) => {
    if (!formEl) {
        return
    }
    formEl.validate((valid) => {
        if (valid) {
            // TODO: 实现表单提交逻辑
            // await request.post('/api/xxx', form.value)
            Message.success('提交成功')
            formEl.resetFields()
        }
    })
}

onBeforeUnmount(() => {
    document.removeEventListener('mousemove', onDrag)
    document.removeEventListener('mouseup', stopDrag)
})
</script>

<style scoped>
.message-form {
    position: fixed;
    width: 250px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    cursor: move;
}

.collapse-header {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #409eff;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.collapse-btn i {
    color: #fff;
    font-weight: 700;
}

.form-content {
    padding: 20px 20px 0 20px;
}

.title {
    font-size: 14px;
    color: #fff;
}

.description {
    font-size: 14px;
    color: #606266;
    margin-bottom: 20px;
    text-align: left;
}

.submit-btn {
    width: 100%;
}

.message-form * {
    user-select: none;
}
</style>
